<template>
	<div class="content">
		<div class="title">
	      <el-breadcrumb separator="/">
	        <el-breadcrumb-item :to="{ path: '/' }"><b>系统</b></el-breadcrumb-item>
	        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
	      </el-breadcrumb>
    	</div>
        <div class="main-content">
        <el-col style="margin:5px 0 20px 20px">
            <el-button type='text' icon="plus" @click="addRole">新增</el-button>
            <el-button type='text' icon="edit" @click="changeRoleInfo">修改</el-button>
            <el-button type='text' icon="delete" @click="deleteRole">删除</el-button>
        </el-col>
		<el-col :span="4">
			<div style="width:200px;padding: 5px 0px 5px 25px">
				<span>角色列表</span>
			</div>
			<el-col>
				<el-radio-group v-model="checked" @change="roleDetail">
					<div v-for="(role , index) in roles" style="margin: 20px 10px 10px 30px">
				   		<el-radio :label="index">{{role.name}}</el-radio>
				    </div>
				</el-radio-group>
			</el-col>
		</el-col>
		<el-col :span="20">
			<el-col style="margin-bottom:20px">
				<el-form v-model="requestContent" :inline="true">
					<el-form-item label="角色代码：">
						<el-input v-model="requestContent.roleCode" :disabled="isDisable" placeholder="请输入内容" style="width:200px"></el-input>
					</el-form-item>&nbsp;&nbsp;&nbsp;&nbsp;
					<el-form-item label="角色名称：">
						<el-input v-model="requestContent.roleName" :disabled="isDisable" placeholder="请输入内容" style="width:200px"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col>
				<el-table
			    ref="multipleTable"
			    :data="authorityTable"
			    border
			    tooltip-effect="dark"
			    style="width: 100%"
			    @selection-change="handleSelectionChange">
				    <el-table-column
				      type="selection"
				      width="100px">
				    </el-table-column>
				    <el-table-column
				      prop="funId"
				      label="ID"
				      width="200px"
				      v-if="false">
				    </el-table-column>
				    <el-table-column
				      prop="funcName"
				      label="权限名称"
				      width="200px">
				    </el-table-column>
				    <el-table-column
				      prop="funcDesc"
				      label="权限描述"
				      width="600px">
				    </el-table-column>
			  	</el-table>
		  	</el-col>
		</el-col>
		<el-col style="margin-top: 30px;text-align: center">
			<el-button type="primary" @click="confirm" :disabled="isKeep">保存</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
		</el-col>
        </div>
	</div>
</template>

<script type="text/javascript">
	import ElCol from 'element-ui/packages/col/src/col'
    import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
    import axios from 'axios'
    import $ from 'jquery'

    export default{
    	components: {
	      ElForm,
	      ElCol
    	},

    	data(){
    		return{
                isKeep:true,
                isDisable:true,
    			roleId:'',
    			checkedList:[],
    			funIdList:[],
    			checked:[],
    			roles:[],
    			requestContent:{roleName:'',roleCode:'',code:''},
    			authorityTable:[]
    		}
    	},
    	methods:{
    		getAuthList(){
    			this.$http.get("/funcs/list")
    			.then((response)=>{
    				this.authorityTable = response.data.data
    			})
    			.catch(function(error){
    				console.log(error)
    			})
    		},

    		getRoleList:function(){
                this.roles=[]
    			this.$http.get("/roles/list")
    			.then((response)=>{
    				let that = this
    				$.each(response.data.data , function(index , value){
    					that.roles.push({Id:value.roleId,name:value.roleName,code:value.roleCode})
    				})
    			})
    			.catch(function(error){
    				console.log(error)
    			})
    		},

    		handleSelectionChange(val){
    			this.checkedList = val
    		},
//
    		roleDetail(role){
    			console.log(this.roles[role])
    			this.$refs.multipleTable.clearSelection()
    			this.roleId = this.roles[role].Id
    			this.requestContent.roleCode = this.roles[role].code
    			this.requestContent.roleName = this.roles[role].name
    			this.$http.get("/roles/detail/"+this.roles[role].Id)
    			.then((response)=>{
    				let that = this
	    			$.each(this.authorityTable,function(index , value){
	    				if(response.data.data.funcList!=''){
	    					$.each(response.data.data.funcList,function(i , items){
		    					if(value.funcId==items.funcId){
		    						that.$refs.multipleTable.toggleRowSelection(value)
		    					}
	    					})
	    				}else{
	    					that.$refs.multipleTable.clearSelection()
	    				}
	    				
	    			})
    			})
    			.catch(function(error){
    				console.log(error)
    			})
    		},
    		
    		confirm(){
    			var RoleForm={}

    			let that = this
                that.funIdList = []
    			$.each(this.checkedList , function(index , value){
    				let json ={}
    				that.funIdList.push({funcId:value.funcId})
    			})

    			RoleForm.roleId = this.roleId
    			RoleForm.roleCode = this.requestContent.roleCode
    			RoleForm.roleName = this.requestContent.roleName
    			RoleForm.funList = this.funIdList
    			RoleForm.companyNo = sessionStorage.getItem('companyNo')
    			console.log(RoleForm)
    			this.$http.post("/roles/detail", RoleForm)
    			.then((response)=>{
    				console.log(response)
                    if(response.data.success){
                        that.getRoleList()
                        that.isKeep = true
                        this.$message('已保存')
                    }else{
                        this.$message('保存失败')
                    }
    			})
    			.catch(function(error){
    				console.log(error)
    			})
                this.getRoleList()
    		},

            deleteRole(){
                //console.log("roleId:"+this.roleId)
                let that =this
                this.$http.delete("/roles/detail/"+this.roleId)
                .then((response)=>{
                    console.log(response)
                    if(response.data.success){
                        this.$message('删除成功')
                        that.getRoleList()
                    }else{
                        this.$message('删除失败')
                    }
                })
                .catch(function(error){
                    console.log(error)
                })
            },

    		addRole(){
                this.isDisable = false
                this.isKeep = false
    			this.checked=[]
    			this.requestContent.roleCode = ''
    			this.requestContent.roleName = ''
    		},

            changeRoleInfo(){
                this.isDisable =false
                this.isKeep = false
            },

    		cancel(){
    			/*this.$router.push({path:''})*/
    		}
    	},

    	mounted(){
    		this.getRoleList()
    		this.getAuthList()
    	}

    }
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  background: #F7F7F7;
  .title {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .main-content {
    background: #fff;
    position: fixed;
    top: 96px;
    bottom: 10px;
    left: 216px;
    right: 16px;
    overflow: auto;
    padding: 20px;
  }
}
</style>